<template>
  <!--  试题预览对话框内容 -->
  <div class="container">
    <el-row :gutter="20">
      <!-- 题型 -->
      <el-col :span="6">
        <div class="grid-content bg-purple">
          【题型】：{{ formatter(listObj.questionType, questionType) }}
        </div>
      </el-col>
      <!-- 标号,绑定的id -->
      <el-col :span="6">
        <div class="grid-content bg-purple">【编号】：{{ listObj.id }}</div>
      </el-col>
      <!-- 难度 -->
      <el-col :span="6">
        <div class="grid-content bg-purple">
          【难度】：{{ formatter(listObj.questionType, difficulty) }}
        </div>
      </el-col>
      <!-- 标签 -->
      <el-col :span="6">
        <div class="grid-content bg-purple">【标签】：{{ listObj.tags }}</div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <!-- 学科 -->
      <el-col :span="6"
        ><div class="grid-content bg-purple">
          【学科】：{{ listObj.subjectName }}
        </div></el-col
      >
      <!-- 目录 -->
      <el-col :span="6"
        ><div class="grid-content bg-purple">
          【目录】：{{ listObj.directoryName }}
        </div></el-col
      >
      <!-- 方向 -->
      <el-col :span="6"
        ><div class="grid-content bg-purple">
          【方向】：{{ listObj.direction }}
        </div></el-col
      >
    </el-row>
    <hr />
    <!-- 题干 -->
    <el-row :gutter="20">
      <el-col>
        【题干】:<span v-html="listObj.question" style="color: #0808ff"></span>
        <!-- 单选 -->
        <div v-if="listObj.questionType === '1'" class="option">
          <p>单选题 选项：（以下选中的选项为正确答案）</p>
          <el-radio
            class="xuan"
            v-model="label"
            @change="label = 1"
            v-for="item in listObj.options"
            :key="item.id"
            :label="item.isRight"
          >
            {{ item.title }}
          </el-radio>
        </div>
        <!-- 多选 -->
        <div v-if="listObj.questionType === '2'" class="option">
          <p>多选题 选项：（以下选中的选项为正确答案）</p>
          <el-checkbox
            class="xuan"
            v-model="checkList"
            @change="checkList = [1]"
            v-for="item in listObj.options"
            :key="item.id"
            :label="item.isRight"
          >
            {{ item.title }}
          </el-checkbox>
        </div>
      </el-col>
    </el-row>
    <hr />
    <!-- 参考答案 -->
    <div>
      【参考答案】：
      <el-button type="danger" @click="controls = !controls"
        >视频答案浏览</el-button
      >
      <!-- 视频 -->
      <div class="video" v-show="controls">
        <video :src="listObj.videoURL" controls="controls" width="100%"></video>
      </div>
    </div>
    <hr />
    <!-- 答案解析 -->
    <div>
      【答案解析】：
      <div v-html="listObj.answer"></div>
    </div>
    <hr />
    <!-- 题目备注 -->
    <div>
      【题目备注】：
      <div v-html="listObj.remarks"></div>
    </div>
  </div>
</template>

<script>
// 枚举
import { questionType, difficulty } from '@/api/hmmm/constants.js'
// 接口
import {} from '@/api/hmmm/questions.js'
export default {
  name: 'articlesPreview',
  props: {
    listObj: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      questionType, // 题型枚举
      difficulty, // 题型难度
      radio: '2', // 单选
      controls: false, // 控制视频显示
      isRightTitle: null, // 按钮默认选中
      label: 1,
      checkList: [1]
    }
  },
  methods: {
    // 枚举转化数据格式
    formatter (val, data) {
      const obj = data.find((item) => item.value === Number(val))
      return obj.label
    }
  }
}
</script>

<style scoped lang='scss'>
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  // background: #99a9bf;
}
.bg-purple {
  // background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  min-height: 10px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.video {
  width: 400px;
  height: 240px;
  margin-top: 10px;
}
.tigan {
  margin-top: 10px;
}
.xuan {
  display: block;
  margin-bottom: 12px;
}
</style>
